Previewing

Because of the complexity and intricacies of style sheets (especially the idiosyncrasies of different browsers) as you develop a style sheet you need to preview it, probably in more than one browser at once.

Style Master has extensive previewing support to help make sure that what you think your reader is going to see is what they in fact see.

In this chapter we look in detail at previewing your style sheet using Style Master.

Previewing in Style Master

You won't be surprised to learn that you can preview a style sheet in Style Master. You might be surprised to learn that the previewing is only quick and dirty, not comprehensive. Why is that? Well, there is a real difference between how a style sheet should make a web page appear, and how pages actually appear in various web browsers. For this reason, Style Master can give you a rough idea of how a page should look, but you'll need to preview in the latest browsers to really know how they actually look.

To preview a statement in a style sheet using Style Master

1. choose Preview in Style Master from the Preview menu

a floating window opens, which contains some sample text styled according to the selected statement in the style sheet.

If you leave this window open, when you edit the properties of the statement, or select another statement, the window updates to reflect the changes.

Note: what you are seeing here is just the properties of the selected statement. It does not show any cascaded or inherited properties. Read the section on Previewing in Web Browsers below for more of a discussion on cascade and inheritance, and why they are important.

Previewing in a Browser

The real purpose of previewing style sheets is to ensure that the effect you want works in the major browsers. For this reason, we've built sophisticated previewing support into Style Master, letting you preview in various ways in any number of browsers.

Overview of Previewing

There are three ways you can preview using web browsers.

you can preview only the properties of a selected statement
you can preview the inherited and cascaded properties of the selected statement
you can preview using a preview web page

You can select a preview mode, then manually update a preview in one or more web browsers by simply clicking a button in the Style Master launcher, or you can choose to have live previewing, where Style Master sends any open browsers an update message every time you make a change to your style sheet. We'll talk more about how you set this up shortly. Before we explain how, let's take a quick look at the difference between each, and why it might be important to preview in this way.

Previewing Selected Properties

Remember that a statement has two parts, a selector, and a set of properties called a declaration. The first preview mode previews only the properties (that is the declaration) of the selected statement. Style Master sends a message to the browser or browsers you have chosen to show some preview text styled with these properties.

This mode is useful for determining exactly what effect a particular statement has by itself. As we will see immediately below, the effect of a statement in a style sheet in part depends on inheritance, and cascading.

Previewing Inherited and Cascaded Properties

Before we continue, it is time for me to explain two terms I've used a bit: cascading and inheritance.

Cascading

Why are Cascading Style Sheets so named? What exactly cascades? Well, style sheets don't stand alone. Rather, a style sheet can import other style sheets. We saw the @import rule in the chapter on Statements and Selectors. The @import rule allows a style sheet to import from a style sheet. It is as if the style then included the statements in that style sheet (as well as the statements in any style sheets that that style sheet imported, and so on.

When a style sheet imports another style sheet, the style sheet doing the importing is said to cascade from the style sheet which it imports. You can see why it is important to preview the effect of cascading, because statements in an imported style sheet might interact with statements in the imported style sheet.

For example, the imported style sheet might define a heading of level 1 as being bold and green. The importing style sheet might define a heading of level one as being red and 12pt. The result is that headings of level one would be drawn as bold, red and 12 point (where the two disagree, the importing style sheet takes precedence).

Inheritance

What about "Inheritance"? Very briefly a web page contains elements which contain other elements, and so on. For example (and you can skip this if you don't know or care about web pages very much, it isn't vital), the main container for the content of a web page is the BODY. This might contain several headings, paragraphs, tables and lists. Each of these might also contain other elements. A heading might contain a BOLD element. A table might contain paragraphs, and so on.

An element often inherits some or all of the properties of the element which contains it. That means, if the body has a particular font property, then each paragraph contained in the body (that is all of the paragraphs in the page) will also have the same font property. You can of course give a different font property to paragraphs in your style sheet, and so override the inheritance, but in the absence of this, all the paragraphs, and other types of elements contained within the BODY, will inherit this font property.

Style Master lets you preview all of the cascaded and inherited properties of a selected statement. In a moment we'll look at how.

Previewing Documents

Because of the complex interaction of inheritance and cascading, the only really good way of understanding how a style sheet will affect a web page is to preview the web page. Style Master makes it very simple and quick to do this. We'll look at how to preview web pages shortly.

Previewing in Web Browsers, the Process in Brief

To preview in a web browser, or set of web browsers, we need to take the following steps

setup the browser or browsers we want to preview with
optionally, setup the HTML document or documents that we are going to preview
choose the mode of previewing, as outlined above
choose whether to have 'live' previewing
launch the preview browser or browsers

We will take a look at each of these steps next.

Editing the Preview Browser List

To add or remove web browsers to or from the list of preview web browsers

1. choose Edit Preview Browser List... from the Preview menu (it's a submenu of the Preview in Browser menu item)

the Edit Browser List window opens

2. click Add Browser, then locate and select the browser application you want to add to the list

3. select a browser from the list and click Remove Browser to remove it from the list

4. click OK to close the window

The browsers that you have selected now appear in the Preview in Browser submenu of the Preview menu.

Choosing the name of a browser in this menu launches the browser if it is not already open, and sends it a message to preview the current style sheet based on your preview mode, which we will discuss shortly.

Editing the Preview Document List

To preview a style sheet in a web page (HTML Document) you first need to setup a list of one or more preview documents. You can add to or remove from this list at any time. You then choose the preview document from this list. You can change the preview document as simply as choosing a menu item.

To add a preview document to or remove it from the list of preview document

1. choose Edit Preview Document List..., from the Preview Using Document... submenu of the Preview menu

the Edit Preview Document window opens

2. click Add Document, then locate and select the HTML document you want to add to the list

3. select a document from the list, then click Remove to remove the document from the list of preview documents

4. click OK to close the window

The documents that you have selected now appear in the Preview in Document submenu of the Preview menu

Choosing the name of a document in this list tells Style Master to preview the selected document.

Previewing the Properties of a Selected Statement only

If you want to preview only the properties of the selected statement

1. choose Show Current Properties from the Preview menu

To preview the selected properties

1. choose the name of the browser you want to preview in from the list of names in the Preview in Browser submenu of the Preview menu

To preview in all open preview browsers

1. click the button in the launcher.

Previewing Cascaded and Inherited Properties

If you want to preview the properties of the selected statement including any cascaded and inherited properties

1. choose Show Cascaded Properties from the Preview menu

To preview the properties

1. choose the name of the browser you want to preview in from the list of names in the Preview in Browser submenu of the Preview menu

To preview in all open preview browsers

1. click the button in the launcher.

Previewing a Style Sheet in a Particular Document

Once you have setup the list of preview documents as described above, select a preview document.

To select a preview document from the list

1. choose the name of the document from the list of preview documents in the Preview Using Document submenu of the Preview menu.

To preview the document you have just selected

1a. click the button in the launcher

1b. choose the name of the browser you want to preview in in the Preview in Browser submenu of the Preview menu

Using Live Preview

When you make a change to a style sheet, or start editing a new style sheet, you can simply update your preview by clicking the button in the launcher.

To update the preview in just one of the open browsers, or to launch a browser for previewing

1. choose the name of the browser to preview in from the Preview in Browser submenu of the Preview menu.

You may however, want Style Master to automatically update your previews in any open preview browsers.

To turn on 'live' previewing

1. choose Live Preview from the Preview menu

While live previewing is in operation, any time you change a style sheet (a statement or its properties) Style Master sends a message to any of the browsers you have selected as preview browsers, asking them to display a preview of the style sheet as it currently stands.

You may find this feature a little annoying, as it can take a second or so (depending on the size of a preview document, the type of Mac you are using and so on) for the preview to be displayed.

To turn off live previewing

1. choose Live Preview from the Preview menu once more

Next up we'll look at applying your style sheets to your web sites by either linking your web pages to your style sheets, or embedding your style sheets in your web pages.